<template>
    <el-dialog width="800px"
               :visible="visible"
               :center="true"
               :modal-append-to-body="false"
               :close-on-click-modal="false"
               @close="$emit('close')">
        <div slot="title" class="font-s20">
            <icon name="mouse-selection"></icon>
            图标选择
        </div>
        <div id="dialog_icon" class="icons-container">
            <el-scrollbar class="r-custom-scrollbar custom-scroll-height"
                          :native="false">
                <div class="icons">
                    <ul v-for="(children, index) in icons"
                        :key="index">
                        <li v-for="(icon, i) in children"
                            :key="i"
                            @click="confirmIcon(icon)">
                            <icon :name="icon"></icon>
                            <p>r-icon-{{ icon }}</p>
                        </li>
                    </ul>
                </div>
            </el-scrollbar>
        </div>
        <div class="mt-20 text-right">
            <el-button type="info"
                       size="medium"
                       icon="el-icon-refresh"
                       :loading="optionLoading"
                       @click="getIcon()">重新载入</el-button>
        </div>
    </el-dialog>
</template>

<script lang="ts">
import { Component, Prop, Emit, Watch, Vue } from 'vue-property-decorator'
import { Action, State } from 'vuex-class'

import { errorMessage, loading } from '@/utils'

@Component
export default class RIconSelector extends Vue {
  @Prop({type: Boolean, default: false}) visible: boolean = false

  @State icons!: Array<any>
  @Action getIcons!: (payload: any) => Promise<any>

  private optionLoading: boolean = false

  @Watch('visible')
  onVisible(val: boolean): void {
    if (val && this.icons.length === 0) {
      this.getIcon()
    }
  }

  /**
   * 获取图标
   * @private
   */
  private getIcon(): void {
    this.$nextTick(() => {
      this.optionLoading = true
      const _loading = loading({target: '#dialog_icon', background: 'rgba(255, 255, 255, .1)'})
      this.getIcons({}).then((res: any) => {
        if (res.status !== 200) {
          errorMessage(res.message)
        }
        _loading.close()
        this.optionLoading = false
      }).catch((err: any) => {
        _loading.close()
        this.optionLoading = false
      })
    })
  }

  @Emit('confirm')
  confirmIcon(val: string): string {
    return val
  }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/element/element.scss";
.icons {

    &-container {
        position: relative;
        overflow: hidden;
        border: 1px solid $--table-border-color;
        border-radius: $--border-radius-base;
    }

    ul {
        display: flex;
        flex-direction: row;
        margin: 0;
        padding: 0;
        //border-left: 1px solid $--table-border-color;

        li {
            list-style: none;
            flex: 1;
            padding: 25px 10px;

            //line-height: 100px;
            text-align: center;
            border-right: 1px solid $--table-border-color;
            border-bottom: 1px solid $--table-border-color;
            transition: all .3s;
            i {
                font-size: 30px;
            }
            p {
                margin-bottom: 0;
                font-size: 12px;
            }
            &:hover {
                color: $--color-primary;
                background-color: $--background-color-base;
            }
            &:last-child{
                border-right: none;
            }
        }

        &:last-child {
            li {
                border-bottom: none;
            }
        }
    }

    &-scrollbar {
        height: 100%;

        .el-scrollbar__wrap {
            overflow-x: hidden !important;
        }
    }
}

.custom-scroll-height {
    height: 500px;
}
</style>
